<template>
    <CommonDialog :visible="visible" width="680px" @on-close="cancel" :title="formData.id ? '编辑教师': '添加教师'">
        <el-form ref="editRef" :model="formData" :rules="formRule" :label-width="88" class="page-lecture" inline>
            <el-form-item class="srt-el-input-item" label="教师姓名" prop="name">
                <el-input v-model="formData.name" maxlength="20" class="srt-el-input" style="width:140px" placeholder="请输入教师姓名"
                    clearable />
            </el-form-item>
            <el-form-item class="srt-el-input-item" label="所在单位" prop="workPlace">
                <el-input v-model="formData.workPlace" maxlength="20" class="srt-el-input" style="width:278px" placeholder="请输入所在单位"
                    clearable />
            </el-form-item>
            <el-form-item class="srt-el-input-item" label="教师简介" prop="description">
                <el-input v-model="formData.description" class="srt-el-input" style="width:534px" :rows="4" type="textarea" placeholder="请输入教师简介"
                    show-word-limit maxlength="500"/>
            </el-form-item>
            <el-form-item class="inline-form" label="教师照片" prop="picture">
                <HeadCover :data="formData.picture" :cur="formData.picture" placeholder="添加照片" :configWidth="160" :configHeight="212"
                    @update:data="formData.picture = $event"></HeadCover>
            </el-form-item>
            <div class="img-tip">图片尺寸 160*212 、 支持jpg、jpeg、png、webp格式，不超过2M</div>
        </el-form>
        <div class="dialog-footer">
            <el-button class="srt-el-button srt-el-button--cancel srt-el-button-h36" @click="cancel">取消</el-button>
            <el-button class="srt-el-button srt-el-button--primary srt-el-button-h36" @click="confirm">确定</el-button>
        </div>
    </CommonDialog>
</template>

<script setup>
import HeadCover from './head-cover.vue';
import CommonDialog from '@/components/common-dialog.vue'
import { ref, watch, computed } from 'vue';
import { deepCopy } from '@yanxiu/lib';

const emit = defineEmits(['update:modelValue', 'update-lecture']);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    form: {
        type: Object,
        default: () => {
            return {};
        }
    }
});


const formRule = ref({
    name: [
        {
            required: true,
            validator: (rule, value, callback) => {
                let temp = value && value.trim() || '';
                if (temp.length > 20 || temp.length < 2) {
                    callback('请输入2-20个字的教师姓名');
                }else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],
    workPlace: [
        {
            required: true,
            validator: (rule, value, callback) => {
                let temp = value && value.trim() || '';
                if (temp.length > 20 || temp.length < 2) {
                    callback('请输入2-20个字的所在单位');
                }else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ],
    // picture: [
    //     {
    //         required: false,
    //         validator: (rule, value, callback) => {
    //             if (value) {
    //                 callback();
    //             } else {
    //                 callback(new Error('请添加照片'));
    //             }
    //         },
    //         trigger: 'none'
    //     }
    // ],
});


const visible = computed({
    get: () => props.modelValue,
    set: val => {
        emit('update:modelValue', val);
    }
})

const formData = ref({});

const editRef = ref(null);

watch(() => props.modelValue, (val) => {
    if (val) {
        formData.value = Object.assign({}, formData.value, props.form);
    } else {
        formData.value = {};
        editRef.value && editRef.value.resetFields();
    }
})



function cancel () {
    emit('update:modelValue', false);
}


// 提交保存
function confirm () {
    editRef.value.validate((valid) => {
        if (!valid) {
            G_dispatchEvent('toast', { message: '请检查必填信息', type: 'error' })
            return;
        }
        formData.value.id = formData.value.id || new Date().getTime();
        let params = deepCopy(formData.value);
        emit('update-lecture', params);
        cancel();
    })
}

// 更新封面列表
function getCovers (templateCovers) {
    return templateCovers ? [templateCovers] : [];
}

</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

.page-lecture {
    :deep(.el-form-item) {
        margin-bottom: 30px;
    }

    :deep(.el-form-item__label) {
        line-height: 40px;
        height: 40px;
        color: var(--srt-color-gray);
        margin-right: 8px;
    }

    :deep(.el-form-item) {
        margin-right: 20px;

        &:nth-child(2n) {
            margin-right: 0px;
        }
    }
    :deep(.img-up) {
        width: 80px;
        height: 106px;
    }
    .img-tip {
        font-size: 14px;
        line-height: 1;
        color: var(--srt-color-light-gray);
        margin: -18px 0px 0px;
        padding-left: 98px;
    }
    :deep(.srt-el-input) {
       .el-textarea__inner {
           padding: 10px 12px;
       }
    }
}
</style>